<template>
  <div class='chart' :id="ttid">
    
  </div>
</template>
<script>
export default {
  props: ["info", "type","ttid"],
  components: {},
  name: "",
  data() {
    return {};
  },
  methods: {
    showChart() {
      var option = {
        tooltip: {
          trigger: "item",
          formatter: "{a}<br/>{b}:{c}({d}%)"
        },
        legend: {
          type: 'scroll',
          bottom: 10,
          left: 'center',
          data: [],
        },
        series: [
          {
            name: "默认标题",
            type: this.type,
            radius: "55%",
            center: ["50%", "45%"],
            label:{
              formatter: "{b}:{d}%",
            },
            data: [],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      };
      
      option.legend.data=this.info.result.map(val=>val.option)
      option.series[0].name=this.info.title
      option.series[0].data=this.info.result.map(val=>{
        return {
          value:val.content,
          name:val.option
        }
      })

      var myChart = echarts.init(document.getElementById(this.ttid));
      myChart.setOption(option);
    }
  },
  created() {
    this.$nextTick(()=>{
      this.showChart()
    })
  }
};
</script>
<style lang="scss" scoped>
.chart {
  height: 800px;
}
</style>